<template>
	<!-- 内容 -->
	<div id="oral_mock_exam_taobao_buy_vue" class="content" style="background: rgb(245, 247, 250); padding-top: 20px;">
		<div class="t_a1">
			<div class="course-a" style="margin-bottom: 14px;"><span>首页 &gt; 口语模考</span></div>
			<div id="middle_content">
				<div id="middle_left2" style="width: 910px; margin-right: 21px;">
					<div style="background-color: rgb(255, 255, 255); border-radius: 5px;">
						<div class="oral_exam oral_exam_taobao">
							<div class="tao_buy_left">
								<Carousel :sliders="state.sliders" :duration="2" :autoplay="true"></Carousel>
							</div>
							<div class="tao_buy_right">
								<!-- <label>雅思口语全真模考</label>
								<div class="tao_price"><label><span
											style="text-decoration-line: line-through; font-size: 10px; position: absolute; color: rgb(119, 119, 119);">原价：159元起</span>
										<span class="tao_price_span">途鸭留学新生专享价：￥</span>129 <span
											class="tao_price_span">元起/25min</span></label></div>
								<p class="exam_cls_time">考试时间：25分钟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有效期：30天
								</p>
								<div class="exam_tips2"
									style="margin-bottom: 7px;margin-left: 10px;color: rgb(255, 0, 0);">
									注：优惠价仅限30天内未参与过任何口语体验课或口语模考活动学生购买一次
								</div> -->
								<img style="width: 100%;height:240px" :src='state.examgoBuyinfo' />
								<button class="exam_btn_buy" @click="goBaoming">报名模考</button>
							</div>
						</div>
						<div class="taobao_recharge_step">
							<div class=" taobao_step" :class="{'taobao_step_active':state.showType == 1}"
								@click="showTypeChange(1)">
								<label>模考详情</label>
								<div></div>
							</div>
							<div class="taobao_step" :class="{'taobao_step_active':state.showType == 2}"
								style="margin-left: 153px;" @click="showTypeChange(2)">
								<label>充值指引</label>
								<div></div>
							</div>
							<div class="taoBao_step_img" v-if="state.showType == 1">
								<img :src="state.examDetailUrl" style="width: 100%;">
							</div>
							<div class="taoBao_step_img" v-if="state.showType == 2">
								<img :src="state.examgoBuy" style="width: 100%;">
							</div>
						</div>
					</div>
				</div>
				<div id="middle_right">
					<AsidePart :sliders="state.sliders"></AsidePart>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import Carousel from "./Swiper.vue";
	import AsidePart from "./asidePart.vue"
	import {
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const {
		proxy
	} = getCurrentInstance()
	const state = reactive({
		sliders: [],
		showType: 1,
		examDetailUrl: '',
		examgoBuy: '',
		examgoBuyinfo: ''
	})

	const showTypeChange = (index) => {
		state.showType = index
	}
	const goBaoming = () => {
		window.open('https://item.taobao.com/item.htm?ft=t&id=691656092237')
	}
	onMounted(() => {
		let posterData = JSON.parse(localStorage.getItem('posterData'))
		console.log(posterData)
		let posterStr = posterData[1].photoPath
		let posterArr = posterStr.split(',')
		state.examDetailUrl = 'http://ielts.tuyaedu.com/boot/sys/common/static/' + posterData[8].photoPath
		state.examgoBuy = 'http://ielts.tuyaedu.com/boot/sys/common/static/' + posterData[9].photoPath
		state.examgoBuyinfo = 'http://ielts.tuyaedu.com/boot/sys/common/static/' + posterData[12].photoPath
		posterArr.forEach(function(item) {
			state.sliders.push({
				imgUrl: 'http://ielts.tuyaedu.com/boot/sys/common/static/' + item
			})
		})
	})
</script>
<style scoped src="../assets/oralMockExam.css"></style>
<style lang="scss" scoped>
	.modal-backdrop {
		width: 100%;
		height: 100%;
	}

	.oralMockTable {
		width: 88%;
		margin: 10px auto;
		word-break: keep-all;
	}

	.oralMockTable th {
		background-color: #e3e7eb;
	}

	.oralMockTable th,
	.oralMockTable td {
		border: 1px solid #bdbbbb;
		padding: 8px;
		line-height: 1.42857143;
		vertical-align: top;
		text-align: center;
		font-size: 14px;
	}

	.oral_mock_btn {
		background-image: linear-gradient(90deg, #ff8d80 0%, #ff574d 100%);
		border: 0;
		color: white;
		padding: 4px 11px;
		border-radius: 6px;
		cursor: pointer;
	}

	.right-navigation-bar {
		border-radius: 0 !important;
	}

	.flex-taoBao-ww {
		display: flex;
		margin-top: 35px;
		padding: 15px 17px 0px;
		justify-content: space-between;
	}

	.close-taobao-confirm {
		outline: none;
		border: 0px !important;
		/* float: right;*/
		font-size: 28px !important;
		height: 10px;
		margin-top: -7px;
		background-color: unset !important;
		position: absolute;
		right: 0;
	}

	.ww-tips {
		text-align: left;
		padding: 8px 19px;
		color: #ff0000;
		font-size: 13px;
	}

	.taobao-modal {
		padding: 40px 28px 0px;
	}

	.order_info {
		background-color: #fff2f1;
		color: #777777;
		font-size: 14px;
		padding: 10px;
		border-radius: 5px;
		line-height: 30px;
	}

	input[type="checkbox"]:not(.switch) {
		border-radius: 3px !important;
		outline: none !important;
	}

	input[type="checkbox"],
	input[type="radio"] {
		--active-inner: #f33b3b !important;
		outline: none !important;
		width: 19px !important;
		height: 19px !important;
		margin-right: 5px !important;
		vertical-align: sub;
	}

	input[type="checkbox"]:checked,
	input[type="radio"]:checked {
		background: #ffffff !important;
		border-color: #eb353599 !important;
		outline: none !important;
	}

	input[type="checkbox"]:not(.switch):after {
		width: 7px !important;
		height: 11px !important;
		left: 5px !important;
		top: 1px !important;
	}

	#advertising .active {
		background-color: #ff4b40;
		border: 1px solid #ffffff !important;
	}

	.carousel-indicators li {
		border: 1px solid #877a7a !important;
	}

	.close-btn2 {
		display: inline-block;
		padding: 0px 3px;
		color: white;
		position: absolute;
		font-size: 38px;
		background-color: transparent !important;
		border: 0 !important;
	}
</style>